<template>
  <div class="container" @click="navigateToCourseDetail">
    <img :src="img" mode="aspectFill">
    <div class="right-wrapper">
      <div class="title">
        {{ title }}
      </div>
      <div class="time-view">
        <span class="time">{{ time }}</span>
        <div class="view-wrapper">
          <span class="view">{{ view }}</span>
          <img src="/static/images/view_64x64.png" mode="aspectFill">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * 课程列表的item
   * @time 2018/04/14
   */
  export default {
    props: {
      img: {
        type: String,
        required: true,
      },
      title: {
        type: String,
        required: true,
      },
      time: {
        type: String,
        required: true,
      },
      // 查看的总次数
      view: {
        type: Number,
      },
      info: {
        type: Object,
      },
    },

    methods: {
      // 点击跳转到课程详情页面
      navigateToCourseDetail() {
        wx.navigateTo({
          url: `/pages/course/courseDetail/main?info=${JSON.stringify(this.info)}`,
        });
      },
    },
    mounted() {
    },
  };
</script>

<style scoped lang="less">
  .container {
    margin: 10px 12px;
    display: flex;
    flex-direction: row;
    img {
      width: 92px;
      height: 70px;
      border-radius: 8px;
    }
    .right-wrapper {
      flex: 1;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: 15px;
        color: #000000;
      }
      .time-view {
        display: flex;
        justify-content: space-between;
        color: #cccccc;
        font-size: 14px;

        .view-wrapper {
          display: flex;
          align-items: center;

          img {
            width: 15px;
            height: 15px;
            margin-left: 6px;
          }
        }
      }
    }
  }
</style>
